<template>
  <button type="success" class="assign_button" @click="assignHome">布置作业</button>
  <div v-if="showAlert" class="assign_aler">
    <p class="aler1"><span class="Xcancle" @click="assignCancle">X</span></p>
    <!-- <p class="aler2">批改权重设置</p>
    <p class="aler3">最终得分=AI自动批改得分+老师批改得分</p>
    <p class="aler3">权重两项加和为100%，单项最小0%，最大100%，单项为0%意味着该项不参与批改。</p>
    <div class="weight-settings">
      <div class="weight-item">
        <label class="weight-item-lable" >AI自动批改所占百分比</label><br>
        <el-input-number class="weight-item-input" v-model="aiScore" :min="0" :max="100"></el-input-number>
      </div>
      <div class="weight-item">
        <label class="weight-item-lable">老师批改所占百分比</label><br>
        <el-input-number class="weight-item-input" v-model="teacherScore" :min="0" :max="100"></el-input-number>
      </div>
    </div> -->
    <h3 style="margin-left: 3%;">时间设置</h3>
    <div class="time-picker-container">
      截止提交时间:
      <el-date-picker v-model="submissionTime" type="datetime" placeholder="选择日期和时间" locale="zh-CN"
        style="margin-bottom: 2%;"></el-date-picker><br>
      成绩公布时间:
      <el-date-picker v-model="publicationTime" type="datetime" placeholder="选择日期和时间" locale="zh-CN"
        style="margin-bottom: 2%;"></el-date-picker>
    </div>
    <button type="danger" class="assign_cancle" @click="assignCancle">取消</button>
    <button type="success" class="assign_issue" @click="submitHomework">发布</button>
  </div>
  <div class="assignment-header">
    <button class="back-button" @click="goBack">← 返回</button>
  </div>

  <div class="homework-assignment">
    <el-form>
      <el-form-item label="作业标题" required>
        <el-input v-model="homework.title" placeholder="请输入作业标题"></el-input>
      </el-form-item>
      <div v-for="(question, index) in homework.questions" :key="index">
        <el-form-item :label="'题目 ' + (index + 1)" required>
          本题分值
          <el-input-number v-model="question.score" :min="0" :max="remainingScore" label="得分"></el-input-number>
          <el-button type="danger" size="small" @click="removeQuestion(index)" class="delete">删除题目</el-button>
          题目内容
          <el-input type="textarea" v-model="question.content" placeholder="请输入题目内容"></el-input>
          参考答案
          <el-input type="textarea" v-model="question.answer" placeholder="请输入参考答案"></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;width: 100%; ">
        <el-button type="primary" class="add" @click="addQuestion">添加新题目</el-button>
      </div>
    </el-form>
  </div>

</template>

<script setup>
import { reactive, computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';


const router = useRouter();
const showAlert = ref(false);
const goBack = () => {
  // 使用路由返回上一页
  router.push('/teacher/assignment/card');
};
const homework = reactive({
  title: '',
  questions: [
    {
      content: '',
      score: 100,
      answer: ''
    }
  ]
});

const assignHome = () => {
  showAlert.value = true;
};

const assignCancle = () => {
  showAlert.value = false;
};

const submissionTime = ref(''); // 截止提交时间的响应式变量

const publicationTime = ref(''); // 成绩公布时间的响应式变量

// const aiScore = ref(20); // AI自动批改的初始分数
// const teacherScore = ref(80); // 老师批改的初始分数

// // 监听aiScore的变化并更新teacherScore
// watch(aiScore, (newVal) => {
//   teacherScore.value = 100 - newVal;
// });

// // 监听teacherScore的变化并更新aiScore
// watch(teacherScore, (newVal) => {
//   aiScore.value = 100 - newVal;
// });

const removeQuestion = (index) => { homework.questions.splice(index, 1); };

const remainingScore = computed(() => 100 - homework.questions.reduce((acc, q) => acc + q.score, 0));

const addQuestion = () => {
  if (remainingScore.value > 0) {
    homework.questions.push({
      content: '',
      score: Math.min(10, remainingScore.value), // 默认新题目分数不超过10分，且不超过剩余分数
      answer: ''
    });
  } else {
    ElMessage.error('总分已达到100分，不能再添加题目或增加分数');
  }
};

const submitHomework = () => {
  const totalScore = homework.questions.reduce((acc, q) => acc + q.score, 0);
  if (totalScore <= 100) {
    ElMessage.success('布置成功');
    router.push('/teacher/dashboard'); // 返回上一个页面
  } else {
    ElMessage.error('题目总分不能超过100分，请调整后提交。');
  }
};
</script>

<style scoped>
.assignment-header {
  display: flex;
  justify-content: space-between;
  height: 7lvh;
  align-items: center;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  margin-left: 3%;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.assign_button {
  position: absolute;
  margin-top: 0.8%;
  margin-left: 87%;
  height: 5%;
  width: 10%;
  background-color: #1a3a8b;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.assign_button:hover {
  background-color: #98a2bb;
}
.assign_aler {
  position: absolute;
  top: 25%;
  left: 35%;
  width: 30%;
  height: 30%;
  background-color: rgb(255, 255, 255);
  border: 1px solid #cccccc;
  z-index: 999;
  border-radius: 5px;
}

.aler1 {
  color: #000000;
  font-size: 20px;
  margin-left: 2%;
  font-weight: bold;
}

.Xcancle {
  float: right;
  margin-right: 5%;
}

.Xcancle:hover {
  color: #ff0202;
  cursor: pointer;
}

/* .aler2 {
  color: #000000;
  font-size: 18px;
  margin-left: 3%;
  font-weight: 520;
}

.aler3 {
  color: #6B7280;
  font-size: 14px;
  margin-left: 5%;
}

.weight-settings {
  height: 25%;
  display: flex;
  align-items: center;
}

.weight-item {
  margin-left: 20%;
  height: 100%;
  width: 20%;
}

.weight-item-lable {
  color: #000000;
  font-size: 14px;
  margin-left: 2%;
  line-height: 4;
  width: 100%;
  background-color: #EFF6FF;
}
.weight-item-input {
  width: 100%;
  height: 60%;
  background-color: #EFF6FF;
} */
.time-picker-container {
  margin-left: 5%;
}

.assign_cancle {
  background-color: #ffffff;
  height: 20%;
  width: 15%;
  margin-left: 28%;
  margin-top: 2%;
  color: rgb(39, 38, 38);
  border: 1px solid #bcbcbc;
  cursor: pointer;
  border-radius: 5px;
}

.assign_cancle:hover {
  background-color: #868a95;
}

.assign_issue {
  background-color: #1a3a8b;
  height: 20%;
  width: 15%;
  margin-top: 2%;
  margin-left: 8%;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.assign_issue:hover {
  background-color: #7a80af;
}

.delete {
  width: 60px;
  height: 30px;
  margin-left: 60%;
}

.homework-assignment {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 20px;
}

.add {
  width: 100%;
  background-color: #EFF6FF;
  color: #3B82F6;
}
</style>